<!DOCTYPE html><html><head>
      <title>vue</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="file:///C:\Users\Administrator\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.3.8\node_modules\@shd101wyy\mume\dependencies\katex\katex.min.css">
      
      
      
      
      
      
      
      
      

      <style> 
      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}


/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
 
      </style>
    </head>
    <body for="html-export">
      <div class="mume markdown-preview   ">
      <h3 class="mume-header" id="vue%E4%B8%8D%E6%8E%A8%E8%8D%90%E6%93%8D%E4%BD%9Cdom">vue(&#x4E0D;&#x63A8;&#x8350;&#x64CD;&#x4F5C;dom)</h3>

<pre class="language-text">&#x7279;&#x70B9;&#xFF1A;
    1. &#x53EA;&#x5173;&#x6CE8;&#x89C6;&#x56FE;&#x5C42;  
    2. &#x53EA;&#x5173;&#x6CE8;&#x89C6;&#x56FE;&#x5C42;   
    3. &#x63D0;&#x9AD8;&#x5F00;&#x53D1;&#x6548;&#x7387;
</pre>
<h4 class="mume-header" id="vue%E6%8F%90%E9%AB%98%E5%BC%80%E5%8F%91%E6%95%88%E7%8E%87">vue&#x63D0;&#x9AD8;&#x5F00;&#x53D1;&#x6548;&#x7387;</h4>

<pre class="language-text">2. &#x539F;&#x751F;js(&#x517C;&#x5BB9;&#x95EE;&#x9898;) -&gt; JQuery&#x7C7B;&#x5E93;(&#x89E3;&#x51B3;&#x517C;&#x5BB9;&#x95EE;&#x9898;) -&gt; &#x524D;&#x7AEF;&#x6A21;&#x677F;(&#x51CF;&#x5C11;&#x4EE3;&#x7801;&#x7F16;&#x5199;&#x91CF;/&#x4F46;&#x662F; &#x6570;&#x636E;&#x91CF;&#x5927; &#x5C31;&#x4F1A;&#x6267;&#x884C;&#x4E00;&#x4E9B;&#x65E0;&#x7528;&#x7684;dom&#x64CD;&#x4F5C;) -&gt; angular.js/vue.js(&#x51CF;&#x5C11;&#x4E0D;&#x5FC5;&#x8981;&#x7684;dom&#x64CD;&#x4F5C;  &#x76F4;&#x63A5;&#x5173;&#x6CE8;&#x4E1A;&#x52A1;&#x903B;&#x8F91;)
</pre>
<h4 class="mume-header" id="%E6%A1%86%E6%9E%B6%E5%92%8C%E7%B1%BB%E5%BA%93%E4%B8%8D%E4%B8%80%E6%A0%B7">&#x6846;&#x67B6;&#x548C;&#x7C7B;&#x5E93;&#x4E0D;&#x4E00;&#x6837;</h4>

<pre class="language-text">&#x6846;&#x67B6; &#x5BF9;&#x9879;&#x76EE;&#x7684;&#x5D4C;&#x5165;&#x6027;&#x975E;&#x5E38;&#x9AD8; &#x6240;&#x4EE5;&#x4E0D;&#x80FD;&#x4FEE;&#x6539;&#x6846;&#x67B6;
</pre>
<h4 class="mume-header" id="mvc%E4%B8%8Emvvm%E7%9A%84%E5%85%B3%E7%B3%BB%E5%9B%BE%E8%A7%A3">MVC&#x4E0E;MVVM&#x7684;&#x5173;&#x7CFB;&#x56FE;&#x89E3;</h4>

<p><img src="./MVC%E4%BB%A5%E5%8F%8AMVVM.png" alt="avatar"></p>
<h4 class="mume-header" id="vue%E5%AE%9E%E4%BE%8B%E4%BC%9A%E7%9B%91%E5%90%AC%E8%87%AA%E8%BA%AB%E5%B1%9E%E6%80%A7-%E6%96%B9%E6%B3%95%E7%9A%84%E5%8F%98%E5%8C%96">vue&#x5B9E;&#x4F8B;&#x4F1A;&#x76D1;&#x542C;&#x81EA;&#x8EAB;&#x5C5E;&#x6027; &#x65B9;&#x6CD5;&#x7684;&#x53D8;&#x5316;</h4>

<pre class="language-text">&#x5F53;&#x4FEE;&#x6539;&#x4E86;&#x5C5E;&#x6027;  vue&#x4F1A;&#x81EA;&#x52A8;&#x5E2E;&#x6211;&#x4EEC;&#x4FEE;&#x6539;dom&#x5143;&#x7D20;
&#x8FD9;&#x6837;&#x6211;&#x4EEC;&#x5C31;&#x53EA;&#x9700;&#x8981;&#x5173;&#x6CE8;&#x6570;&#x636E;
</pre>
<h4 class="mume-header" id="%E6%8F%92%E5%80%BC%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%B8%8Ev-text%E4%B8%8Ev-html">&#x63D2;&#x503C;&#x8868;&#x8FBE;&#x5F0F;&#x4E0E;v-text&#x4E0E;v-html</h4>

<pre class="language-text">&#x95EA;&#x70C1;&#x95EE;&#x9898;&#xFF1A; 
    vue.js&#x5728;&#x540E;&#x9762;&#x6DFB;&#x52A0; &#x52A0;&#x8F7D;&#x9875;&#x9762;&#x65F6;&#x5019; &#x5728;&#x672A;&#x52A0;&#x8F7D;&#x5B8C;vue.js&#x65F6; &#x4F1A;&#x663E;&#x793A;{{msg}}&#x7C7B;&#x4F3C;&#x7684;&#x8868;&#x8FBE;&#x5F0F; 
&#x63D2;&#x503C;&#x8868;&#x8FBE;&#x5F0F; &#x4F1A;&#x51FA;&#x73B0;&#x95EA;&#x70C1;&#x95EE;&#x9898;
v-text    &#x4E0D;&#x4F1A;&#x51FA;&#x73B0;&#x95EA;&#x70C1;&#x95EE;&#x9898; &#x4F46;&#x662F;&#x4F1A;&#x8986;&#x76D6;&#x539F;&#x6807;&#x7B7E;&#x7684;&#x5185;&#x5BB9; 
v-html    &#x65E0;&#x95EA;&#x70C1;    &#x89E3;&#x91CA;&#x4E3A;html&#x8BED;&#x53E5;
</pre>
<h4 class="mume-header" id="vue-%E7%9B%B8%E5%85%B3%E6%8C%87%E4%BB%A4">vue &#x76F8;&#x5173;&#x6307;&#x4EE4;</h4>

<pre class="language-text">&#x662F;&#x6807;&#x7B7E;&#x7684;&#x5C5E;&#x6027;
1. &#x80CC;&#x666F;: vue.js&#x5728;&#x540E;&#x9762;&#x6DFB;&#x52A0; &#x4F46;&#x662F;&#x52A0;&#x8F7D;&#x9875;&#x9762;&#x65F6;  &#x4F1A;&#x663E;&#x793A;{{msg}}&#x7C7B;&#x4F3C;&#x7684;&#x8868;&#x8FBE;&#x5F0F; 
   &#x6307;&#x4EE4;&#xFF1A;&#x7ED9;&#x6807;&#x7B7E;&#x6DFB;&#x52A0;v-cloak&#x5C5E;&#x6027;  &#x5728;stlye&#x4E2D;&#x6DFB;&#x52A0; [v-cloak]{display:none;}
   &#x6548;&#x679C;&#xFF1A;&#x5728;&#x9875;&#x9762;&#x52A0;&#x8F7D;&#x5B8C;vue.js&#x4E4B;&#x524D;&#x4E0D;&#x4F1A;&#x663E;&#x793A; {{msg}}&#x8868;&#x8FBE;&#x5F0F; &#x76F4;&#x5230;&#x52A0;&#x8F7D;&#x5B8C;  
2. v-text 
    &#x4E0D;&#x4F1A;&#x51FA;&#x73B0;&#x95EA;&#x70C1;&#x95EE;&#x9898; &#x4F46;&#x662F;&#x4F1A;&#x8986;&#x76D6;&#x539F;&#x6807;&#x7B7E;&#x7684;&#x5185;&#x5BB9;
3. v-html
    &#x5C06;&#x5185;&#x5BB9;&#x89E3;&#x6790;&#x4E3A;html&#x8BED;&#x53E5;  &#x65E0;&#x95EA;&#x70C1;&#x95EE;&#x9898; &#x8986;&#x76D6;&#x539F;&#x6709;&#x5185;&#x5BB9;
    &lt;input type=&quot;button&quot; value=&quot;&#x6309;&#x94AE;&quot; v-html&gt;
4. v-bind
    vue&#x4E2D;&#x7528;&#x4E8E;&#x7ED1;&#x5B9A;&#x5C5E;&#x6027;&#x7684;&#x6307;&#x4EE4;
    vue&#x4E2D;&#x6709;myTitle&#x7684;&#x53D8;&#x91CF;
    &lt;input type=&quot;button&quot; value=&quot;&#x6309;&#x94AE;&quot; title=&quot;myTitle&quot;&gt;  &#x8FD9;&#x6837;&#x4F1A;&#x88AB;&#x89E3;&#x91CA;&#x6210;&#x5B57;&#x7B26;&#x4E32; &#x800C;&#x4E0D;&#x662F;vue&#x53D8;&#x91CF;
    &lt;input type=&quot;button&quot; value=&quot;&#x6309;&#x94AE;&quot; v-bind:title=&quot;myTitle&quot;&gt; &#x8FD9;&#x6837;title&#x7684;&#x5C5E;&#x6027;&#x4FBF;&#x4F1A;&#x88AB;vue&#x7ED1;&#x5B9A; myTitle&#x5C31;&#x662F;&#x53D8;&#x91CF;
    &#x7F29;&#x5199;
    &lt;input type=&quot;button&quot; value=&quot;&#x6309;&#x94AE;&quot; :title=&quot;myTitle&quot;&gt; &#x8FD9;&#x6837;title&#x7684;&#x5C5E;&#x6027;&#x4FBF;&#x4F1A;&#x88AB;vue&#x7ED1;&#x5B9A; myTitle&#x5C31;&#x662F;&#x53D8;&#x91CF;
5. v-on
    &#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A;
    v-on:click=&quot;vue&#x4E2D;&#x5B9A;&#x4E49;&#x7684;&#x65B9;&#x6CD5;&#x540D;&quot;;
    &lt;input type=&quot;button&quot; value=&quot;&#x6309;&#x94AE;&quot; :title=&quot;myTitle&quot; v-on:click=&quot;show&quot;&gt; 
    &#x7F29;&#x5199;
    &lt;input type=&quot;button&quot; value=&quot;&#x6309;&#x94AE;&quot; :title=&quot;myTitle&quot; @click=&quot;show&quot;&gt; 
</pre>
<h4 class="mume-header" id="%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6">&#x4E8B;&#x4EF6;&#x4FEE;&#x9970;&#x7B26;</h4>

<pre class="language-text">1. .stop    &#x963B;&#x6B62;&#x7236;&#x5143;&#x7D20;&#x4E8B;&#x4EF6;&#x5192;&#x6CE1;
    &lt;div class=&quot;outer&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;&#x6309;&#x94AE;&quot; @click.stop=&quot;show&quot;&gt;
    &lt;/div&gt;
2. .prevent  &#x963B;&#x6B62;&#x4E8B;&#x4EF6;
    &lt;div class=&quot;outer&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;&#x6309;&#x94AE;&quot; @click.prevent=&quot;show&quot;&gt;
    &lt;/div&gt;
3. .capture  &#x963B;&#x6B62;&#x4E8B;&#x4EF6;&#x6355;&#x83B7; 
    &lt;div class=&quot;outer&quot;&gt;
        &lt;input type=&quot;button&quot; value=&quot;&#x6309;&#x94AE;&quot; @click.prevent=&quot;show&quot;&gt;
    &lt;/div&gt;
4. .self     
5. .once
</pre>

      </div>
      
      
    
    
    
    
    
    
    
    
  
    </body></html>